<template>
    <ul class="sea-steps" style="display: inline-block;">
        <li v-for="(item, idx) in list" :key="idx" class="sea-steps-item">
            <strong :class="item.style" @click="props.click(idx)">
                <i :class="item.icon"></i> {{ item.label }}
            </strong>
            <span class="sea-steps-separator text-gray">{{ props.separator }}</span>
        </li>
    </ul>
</template>

<script setup lang="ts">
import {reactive, watch} from "vue";
import {SeaFont, StepFont, DefaultStepFont} from "@/widget/types.ts";
import Layers from "@/lang/layers/index";

/**
 * 极简步骤条
 *
 * 跟面包屑一样的设计：step1> step2> step3> step4
 * element-ui 也有类似的设计，按需选择。
 */
interface Props {
    // 当前步骤，单向控制
    step?: number | string
    // 分隔符
    separator?: string
    // 步骤条详细设置
    options?: StepFont[]
    // 三角形 - 透明度
    titles?: string[]
    // 点击事件
    click?: (number) => void
}

const props = withDefaults(defineProps<Props>(), {
    step: 0, separator: '>', click: Layers.method()
})

/**
 * 步骤条步骤参数
 */
class Item implements SeaFont {
    /**  样式选项 **/
    model: StepFont;
    /**  当前序号 **/
    index: number;
    /**  文字 **/
    label: string;
    /**  样式 **/
    style: string;
    /**  图标 **/
    icon: string;

    constructor(idx: number, model: StepFont) {
        this.index = idx;
        this.model = model;
    }

    /**
     * 步骤比较，得出当前应该采用的样式
     * @param index 步骤序号
     */
    compare(index) {
        let font: SeaFont;
        if (this.index < index) {
            font = this.model.prepare;
        } else if (this.index === index) {
            font = this.model.working;
        } else {
            font = this.model.complete;
        }
        this.icon = font.icon;
        this.style = font.style;
        this.label = font.label;
    }
}

const opts: Item[] = [];
const list = reactive(opts);

const setOption = (arr: StepFont[]) => {
    for (let i = 0; i < arr.length; i++) {
        opts.push(new Item(i, arr[i]));
    }
    setStep(props.step);


}

const setTitles = (arr: string[]) => {
    for (let i = 0; i < arr.length; i++) {
        const item = new Item(i, new DefaultStepFont(arr[i]));
        opts.push(item);
    }
    setStep(props.step);
}

const setStep = (idx) => {
    for (let i = 0; i < opts.length; i++) {
        opts[i].compare(idx);
    }
}


watch(() => props.step, setStep);

watch(() => props.options, setOption);

watch(() => props.titles, setTitles);

{
    if (props.options !== undefined) {
        setOption(props.options);
    } else if (props.titles !== undefined) {
        setTitles(props.titles);
    }
}

</script>

<style lang="scss" scoped>
</style>